<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: #545c64;height: 80px;">

                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
                    <el-menu-item index="1">集团管理</el-menu-item>
                    <el-menu-item index="2">企业管理</el-menu-item>
                    <el-menu-item index="3">平台运营</el-menu-item>
                    <el-menu-item style="text-align: right;" index="4">退出登录</el-menu-item>
                </el-menu>
            </el-header>
            <el-container style="height: 100vh;">
                <el-aside width="200px" style="background-color: #545c64;">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                        <el-menu-item index="Sourse">
                            <el-icon><icon-menu /></el-icon>
                            <span>溯源管理</span>
                        </el-menu-item>
                        <el-menu-item index="Detail">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>详情</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>Navigator Four</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>